<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主题

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    chartData: {
      type: Object,
      default: () => ({
        center: '数据中心',
        nodes: ['飞机', '高铁', '慢车', '自驾'],
        values: [216, 242, 198, 273]
      })
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions({ center, nodes, values } = this.chartData) {
      // 构建图表数据
      const data = [
        {
          name: center,
          symbolSize: 80,
          itemStyle: {
            color: '#1890ff'
          },
          x: 0,
          y: 0,
          fixed: true,
          label: {
            show: true,
            position: 'inside',
            color: '#fff',
            fontSize: 14
          }
        }
      ]

      // 添加节点
      const positions = [
        { x: -100, y: -30 }, // 左上
        { x: 100, y: -30 },  // 右上
        { x: -100, y: 30 },  // 左下
        { x: 100, y: 30 }    // 右下
      ]

      nodes.forEach((node, index) => {
        data.push({
          name: node,
          symbolSize: 40,
          itemStyle: {
            color: '#5470c6'
          },
          x: positions[index].x,
          y: positions[index].y,
          label: {
            show: true,
            position: 'bottom',
            color: '#fff',
            fontSize: 14,
            distance: 5
          }
        })
      })

      // 构建连接关系
      const links = []
      nodes.forEach((node, index) => {
        links.push({
          source: center,
          target: node,
          value: values[index] + '万人次',
          lineStyle: {
            color: '#00ffbb',
            width: 2,
            curveness: 0.2
          },
          label: {
            show: true,
            formatter: '{c}',
            fontSize: 14,
            color: '#00ffbb',
            position: 'middle'
          }
        })
      })

      this.chart.setOption({
        title: {},
        tooltip: {
          formatter: '{b}'
        },
        series: [{
          type: 'graph',
          layout: 'none',
          symbolSize: 50,
          roam: false,
          edgeSymbol: ['none', 'arrow'],
          edgeSymbolSize: [0, 10],
          edgeLabel: {
            fontSize: 14
          },
          data: data,
          links: links,
          lineStyle: {
            opacity: 0.9,
            width: 2,
            curveness: 0.2
          }
        }]
      })
    }
  }
}
</script>
